因为ueditor在npm上暂无官方依赖包,因此需要先到官网下载文件包,我下载的是jsp版本的
2.引入依赖文件将下载后的文件夹命名为UE,并放入到项目static文件夹中,然后再main.js引入依赖文件(我这里是全局引入,也可以再使用的组件中引入);
import '../static/UE/ueditor.config.js'import '../static/UE/ueditor.all.min.js'import '../static/UE/lang/zh-cn/zh-cn.js'import '../static/UE/ueditor.parse.min'3.初始化ueditor我这里是单独将ueditor抽成一个组件,因此初始化时的id和配置都是从父组件传入的。定义组件:
export default { name: 'UE', data () {return { editor: null} }, props: {config: { type: Object},id: { type: String},content: { type: String} }, mounted () {this._initEditor() }, methods: {_initEditor () { // 初始化 this.editor = UE.getEditor(this.id,this.config)},getUEContent () { // 获取含标签内容方法 return this.editor.getContent()} }, destroyed () {this.editor.destroy() }4.使用组件:(1).通过import引入定义好的组件;import UE from '@/components/ueditor/ueditor.vue'(2).在对应的位置使用组件
(3).在父组件的data中定义初始化配置
// 初始化Ueditor配置参数 config: {initialFrameWidth: null,initialFrameHeight: 300 }, id: 'container',// 不同编辑器必须不同的id(4).在父组件中获取编辑器内容
// 获取富文本内容getEdiotrContent () { let content = this.$refs.ue.getUEContent() // 调用子组件方法 this.articleData.articleContent = content}使用配置如果需要使用到图片上传功能就需要进行在资源文件ueditor.config.js中正确配置资源路径和图片上传路径资源加载路径:window.UEDITOR_HOME_URL = "/static/UE/";文件上传路径:serverUrl: 后台接口地址
跳坑心得1.开发环境正常使用,但生产环境样式文件未加载,编辑器无法正常显示,图片上传功能无法使用(1)样式文件未加载在开发环境我配置的资源路径是:window.UEDITOR_HOME_URL = "/static/UE/";但当我发布到生产环境时样式完全乱了。—— 这是因为我代码不是直接放在服务器根目录,而是下级文件夹中,因此资源文件无法正确加载,因为需要开发环境和生产环境配置不同的window.UEDITOR_HOME_URL,当然如果代码放在根目录,此处无需修改(2)图片上传无法使用—— 这是因为的在开发环境上传路径做了代理,而static文件不会被打包压缩,在生产环境请求路径就不对。以上两个问题,我做了如下配置:
var serverApi = ''; if (process.env.NODE_ENV === "production" || process.env.NODE_ENV === "productionTest") { // 生产/测试环境window.UEDITOR_HOME_URL = "/newconsole/modules/static/UE/";serverApi = "/newconsole/static/UE/config/getConfig" }else { // 开发环境window.UEDITOR_HOME_URL = "/static/UE/";serverApi = "/api/static/UE/config/getConfig" } var URL = window.UEDITOR_HOME_URL || getUEBasePath(); /** * 配置项主体。注意,此处所有涉及到路径的配置别遗漏URL变量。 */window.UEDITOR_CONFIG = {//为编辑器实例添加一个路径,这个不能被注释UEDITOR_HOME_URL: URL,// 服务器统一请求接口路径serverUrl: serverApi }这样就可以很好的兼任开发环境和生产环境。
2.编辑器内容过多时,会将编辑器撑开拉长,体验不好这个问题处理就比较简单了,只需要在ueditor.config.js文件中修改autoHeightEnabled:false 即可,这样如果内容过多时就会出现滚动条,而不会撑开编辑器。
好了,以上就是此次使用Ueditor的一点个人总结,希望能给遇到同样问题的小伙伴一点点帮助。